<template>
	<uni-popup ref="popup" type="bottom" @change="change">
		<view class="cart-popup">
			<view class="header">
				<view class="order-type">
					<view class="font-weight-bold">门店订单</view>
					<!-- <view class="extra">自提/外送</view> -->
				</view>
				<view class="flex align-center" @tap="clear">
					<!-- <image src="/static/images/common/delete.png" class="delete-btn"></image>-->
					<uni-icons custom-prefix="iconfont" type="icon-empty"></uni-icons>
					<view>清空</view> 
				</view>
			</view>
			<!-- 必选商品 -->
			<scroll-view scroll-y style="max-height: 500rpx;" v-if="requireCart.length > 0">
				<view class="required-content" v-for="(item, index) in requireCart" :key="index">
					<view>
						<text style="margin-right: 8rpx;">{{item.fName}}</text>
						<text style="color: #ed4d4f;">￥{{item.vipPrice || item.fPosPrice}}</text>
					</view>
				<view class="num-btn"> <!-- v-show="number" v-show="number"-->
					<image src="/static/images/common/round_minus.png" class="minus-btn" @click="toCanteen"></image>
					<view class="number">{{item.fQty}}</view>
					<image src="/static/images/common/round_add_normal.png" class="add-btn" @click="toCanteen"></image>
				</view>
				</view>
			</scroll-view>
			
			<view style="height: 26rpx;background-color: #f7f7f7;"></view>
			
			<scroll-view scroll-y class="content">
				<view class="wrapper">
					<view class="list">
						<view class="item" v-for="(item, index) in cart" :key="index">
							<view class="left">
								<image :src="item.FPic" mode="aspectFit" class="image"></image>
							</view>
							<view class="right">
								<view class="name-and-materials">
									<view class="name">{{ item.FName }}</view>
									<view class="materials">{{item.FSpec}} {{item.FeedTasteNames}}</view>
									<!-- <view class="materials" v-if="item.materials_text">{{ item.materials_text }}</view> -->
								</view>
								<view class="price-and-actions">
									<view class="originalPrice" :class="{isVip:item.vipPrice && userInfo.id}">
										 原价￥{{item.FPosPrice}}
									</view>
									<view class="price" v-if="item.vipPrice">
										<text class="fsize-24">会员价￥</text>
										<text>{{item.vipPrice}}</text>
									</view>
									<actions :number="item.number" @add="add(item)" @minus="minus(item)"></actions>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</uni-popup>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue'
import actions from '../actions/actions.vue'
	import {
		mapState,
	} from 'vuex'
export default {
	components: {
		uniPopup,
		actions
	},
	props: {
		cart: {
			type: Array,
			default: () => []
		},
		requireCart: {
			type: Array,
			default: () => []
		}
	},
	computed:{
		...mapState(['userInfo'])
	},
	methods: {
		// 跳转
		toCanteen(){
			uni.navigateTo({
				url:'/pages/canteen/quantity/quantity?cart=isCart',
			})
		},
		
		open() {
			this.$refs['popup'].open()
		},
		close() {
			this.$refs['popup'].close()
		},
		change({show}) {
			this.$emit('change', show)
		},
		add(item) {
			this.$emit('add', item)
		},
		minus(item) {
			this.$emit('minus', item)
		},
		clear() {
			uni.showModal({
			  content: '是否清空购物车?',
				confirmColor: '#DBA871',
			    success: res => {
						if (res.confirm) {
							this.$emit('clear')
						}
			    }
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.cart-popup {
	background-color: #fff;
	padding-bottom: 100rpx;
}

.header {
	padding: 20rpx 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1rpx solid rgba($color: #c8c7cc, $alpha: 0.6);
	font-size: 24rpx;
	color: #777;

	.order-type {
		display: flex;
		align-items: center;
		font-size: 30rpx;
		color: #343434;
		
		.extra {
			margin-right: 10rpx;
			border: 2rpx solid #E0A32D;
			font-size: 18rpx;
			padding: 2rpx 10rpx;
			color: #E0A32D;
			margin-left: 10rpx;
		}
	}
	
	.delete-btn {
		width: 46rpx;
		height: 46rpx;
		margin-right: 10rpx;
	}
}

.content {
	max-height: calc(100vh - 700rpx);
	
	.wrapper {
		width: 100%;
		height: 100%;
		padding: 0 30rpx;
	}
	
	.list {
		display: flex;
		flex-direction: column;
		margin-bottom: 30rpx;
		
		.item {
			display: flex;
			align-items: stretch;
			padding: 30rpx 0;
			position: relative;
	
			.left {
				flex-shrink: 0;
				display: flex;
				align-items: center;
				
				.image {
					width: 110rpx;
					height: 110rpx;
				}
			}
			
			.right {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				font-size: 28rpx;
				color: #343434;
				margin-left: 10rpx;
				
				.name-and-materials {
					display: flex;
					flex-direction: column;
					margin-bottom: 20rpx;
					
					.name {
						font-weight: bold;
						font-size: 30rpx;
					}
					
					.materials {
						font-size: 24rpx;
						color: #777;
					}
				}
				
				.price-and-actions {
					display: flex;
					justify-content: space-between;
				
					.price {
						color: #EC3E40;
					}
				}
			}
		}
	}
}
// 必选
.required-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 30rpx;
	& > view {
		line-height: 50rpx;
	}
}

	// 数字
	.num-btn {
		display: flex;
		min-width: 150rpx;
		justify-content: space-between;

		.add-btn,
		.minus-btn {
			width: 44rpx;
			height: 44rpx;
		}

		.number {
			font-size: 30rpx;
			width: 1.3rem;
			height: 1.3rem;
			line-height: 1.3rem;
			text-align: center;
			border-radius: 100%;
		}
		}
		// 删除线
		.isVip {
		text-decoration: line-through;
	}
</style>
